博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第五篇、微信小程序-swiper组件
阅读量:5166 次
发布时间:2019-06-13

本文共 1349 字,大约阅读时间需要 4 分钟。

常用属性:

 

效果图:

 

swiper.wxml添加代码:

自动切换时间间隔
滑动动画时长

 

js:

Page({  data: {    imgUrls: [      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'    ],    indicatorDots: false,    autoplay: false,    interval: 1000,    duration: 1800  },  //是否显示面板指示点  changeIndicatorDots: function(e) {    this.setData({      indicatorDots: !this.data.indicatorDots    })  },  //是否自动切换  changeAutoplay: function(e) {    this.setData({      autoplay: !this.data.autoplay    })  },  //自动切换时间间隔  intervalChange: function(e) {    this.setData({      // e.detail.value获取slider的值      interval: e.detail.value    })  },  //滑动动画时长  durationChange: function(e) {    this.setData({      duration: e.detail.value    })  },  //当页面改变是会触发  bindchangeTag:function(e){    console.log("bindchangeTag...")  },   onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数  },  onReady:function(){    // 页面渲染完成  },  onShow:function(){    // 页面显示  },  onHide:function(){    // 页面隐藏  },  onUnload:function(){    // 页面关闭  }})

 

css:

.slide-image{
width: 100%; height: 160px;}

 

转载于:https://www.cnblogs.com/HJQ2016/p/5988671.html

你可能感兴趣的文章
Working with SSH keys
查看>>
Vue
查看>>
angulrar知识点整理
查看>>
Java design patterns
查看>>
包装类解析
查看>>
计算机读写操作原理
查看>>
2018-10-27
查看>>
python-整理--连接MSSQL
查看>>
JS图片画方块定位坐标
查看>>
[C#]写自己的类库
查看>>
汉诺塔
查看>>
CentOS安装zip及用法
查看>>
RocketMQ系列实战
查看>>
关于SharePoint 2010体系架构的几个话题
查看>>
页面布局
查看>>
ie6 ie7 ie8 ie9 ff css 区别
查看>>
夺命雷公狗---微信开发54----微信js-sdk接口开发(1)之快速入门
查看>>
Ansible配置文件
查看>>
BootstrapTable的使用教程
查看>>
前端切图:自制简易音乐播放器
查看>>